<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <script type="text/javascript" src="build/r.js"></script>
    <script type="text/javascript" src="build/zrender.js"></script>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
document.body.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);
     
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    require(
            [
                "zrender",
                "zrender/animation/Animation",
                'zrender/shape/Circle',
                'zrender/shape/Polyline',
                'zrender/shape/Heart',
            ],
            function(zrender, Animation, CircleShape, PolylineShape, HeartShape){
                main = document.getElementById("Main");
                pageHeight = 400;
                pageWeight = document.body.clientWidth >600 ? 600 : document.body.clientWidth;
                main.style.weight = pageWeight + 'px';
                main.style.height = pageHeight+'px';
                speed = 1000;
                
                var zr = zrender.init( main );
                var tm = [];
                var score = 0;
                var width = Math.ceil(zr.getWidth());
                var height = Math.ceil(zr.getHeight());
                var eventTool = require('zrender/tool/event');
                var knife = new PolylineShape({
                    shape : 'polyline',
                    zlevel : 1, 
                    style : {
                        pointList : [
                            [width / 2, height / 2],
                            [width / 2, height / 2],
                            [width / 2, height / 2],
                            [width / 2, height / 2],
                            [width / 2, height / 2],
                            [width / 2, height / 2],
                            [width / 2, height / 2],
                            [width / 2, height / 2]
                        ],
                        strokeColor : _getRandomColor(0.6),
                        lineWidth : Math.round(Math.random() * 5)
                    },
                    hoverable : false   // default true
                });
                function _getRandomColor(opacity) {
                    return 'rgba('
                            + Math.round(Math.random() * 256) + ','
                            + Math.round(Math.random() * 256) + ','
                            + Math.round(Math.random() * 256) + ', ' + opacity + ')'
                }
                zr.addShape(knife);
                zr.render();
                zr.on(
                        'mousemove',
                        function(params) {
                            if (1) {
                                knife.style.pointList.push([
                                    eventTool.getX(params.event),
                                    eventTool.getY(params.event)
                                ]);
                                knife.style.strokeColor = _getRandomColor(0.1);
                                knife.style.lineWidth = Math.round(Math.random() * 5);
                                knife.style.pointList.shift();
                                zr.modShape(knife.id, knife);
                                zr.refresh();
                            }
                        }
                );
                var creata_circle = function(x){
                    x = x || 20
                    if(x <20 ) x = 20
                    if(x >pageWeight-20) x = pageWeight-20
                    var circle = new HeartShape({
                        scale : [1, 1],
                        hoverable: false,
                        style : {
                            x : x,
                            y : pageHeight,
                            a : 30,
                            b : 40,
                            brushType : 'both',
                            color : _getRandomColor(0.8),
                            strokeColor: _getRandomColor(0.8),
                            lineWidth : 5,
                        },
                        draggable : false,
                        onmouseover  : function(){
                            circle.dispatch('onmouseover');
                        }
                    });
                    zr.addShape(circle);
                    zr.render();
                    tm[circle.id] = zr.animate( circle.id, "").when((speed-score),{
                                position : [0, -pageHeight]
                            }).start().done(function(){
                        zr.delShape(circle.id)
                    });

                    circle.one('onmouseover', function(){
                        score++;
                        document.getElementById('my-score').innerHTML = score;
                        tm[circle.id].stop();
                        zr.animate( circle.id, "")
                                .when(1000, {
                                    position : [circle.position[0], pageHeight]
                                }).start().done(function(){
                                    zr.animate(circle.id, "style").when(1000,{
                                        color: 'rgba(33, 222, 10, 0)'
                                    }).start().done(function(){
                                        zr.delShape(circle.id)
                                    })

                                })

                    })
                }

                function GetRandomNum(Min,Max)
                {
                    var Range = Max - Min;
                    var Rand = Math.random();
                    return(Min + Math.round(Rand * Range));
                }

                setInterval(function(){
                    creata_circle(GetRandomNum(20,pageWeight))
                }, 200)




            })


</script>
<div id="Main" style=" border:1px solid linen; background:url(1.jpg)" ></div>
<p >you score:<span id="my-score">0</span></p>
</body>
</html>
